<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>注册</title>
    <link rel="stylesheet" href="/assets/css/reg.css">
    <script src="/assets/scripts/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

<div id="reg">
    <div class="logo_box">
        <h3>
            <img src="/assets/img/tx.png" class="imguser">
            <br>
            用户注册
        </h3>
        <form id="loginForm" method="post" action="">
            <div class="input_outer">
                <span class="u_user"></span>
                <input class="text" type="number" name="studentNumber" placeholder="学号" autocomplete="off" required>
            </div>
            <div class="input_outer">
                <span class="u_user"></span>
                <input class="text" type="text" name="studentName" placeholder="学生姓名" autocomplete="off" pattern="[A-Za-z\u4e00-\u9fa5]{1,20}" title="请输入有效的姓名" required>
            </div>
            <div class="input_outer">
                <span class="u_user"></span>
                <div class="text">
                    <label for="gender_male">性别:</label>
                    <input type="radio" id="gender_male" name="gender" value="男" required> 男
                    <input type="radio" id="gender_female" name="gender" value="女"> 女
                </div>
            </div>
            <div class="input_outer">
                <span class="u_birth"></span>
                <input class="text" type="date" name="birthday" placeholder="生日" autocomplete="off" required>
            </div>

            <div class="input_outer">
                <span class="us_pwd"></span>
                <input class="text" name="password" placeholder="请输入密码" type="password" autocomplete="off" required>
            </div>
            <div class="input_outer">
                <span class="us_pwd2"></span>
                <input class="text" name="confirmPassword" placeholder="确认密码" type="password" autocomplete="off" required>
            </div>
            <div>
                <input type="Submit" class="mb2_submit" value="立 即 注 册">
            </div>
            <a href="/studentSociety">已有账号？点击登录</a>
        </form>

        <!-- 删除用于显示错误信息的部分 -->
        <!-- <div class="error-message" style="color: red; display: none;"></div> -->
    </div>
</div>

<script>
    document.getElementById('loginForm').addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止默认的表单提交

        // 检查密码和确认密码是否一致
        const password = document.forms["loginForm"]["password"].value;
        const confirmPassword = document.forms["loginForm"]["confirmPassword"].value;
        if (password !== confirmPassword) {
            alert("密码和确认密码不一致！");
            return false;
        }

        // 获取表单数据
        const formData = new FormData(this);

        // 使用 URLSearchParams 将 FormData 转换为 application/x-www-form-urlencoded 格式
        const params = new URLSearchParams();
        formData.forEach((value, key) => {
            params.append(key, value);
        });

        // 发送 POST 请求
        fetch('/studentSociety/student/register', {
            method: 'POST',
            body: params  // 使用 URLSearchParams 作为请求体
        })
            .then(response => {
                if (response.status === 200) {
                    // 请求成功，重定向到首页
                    alert("注册成功！");
                    window.location.href = "/studentSociety";
                } if (response.status === 500)  {
                    alert("注册失败！");
                }
            })
            .catch(error => {
                console.error('Error:', error);  // 打印错误
                alert("服务器错误，请稍后重试。");  // 弹窗显示通用错误消息
            });

    });
</script>

</body>
</html>
